<template>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1">
          <ul class="main">
            <li class="flex"><span class="column">商户名称:</span><span class="show">{{curData.name}}</span></li>
            <li class="flex"><span class="column">联系人:</span><span class="show">{{curData.bossName}}</span></li>
            <li class="flex"><span class="column">联系电话:</span><span class="show">{{curData.mobile}}</span></li>
            <li class="flex"><span class="column">外卖电话:</span><span class="show">{{curData.wmMobile}}</span></li>
            <li class="flex">
              <span class="column">商户类型:</span> <span class="show">
                {{curData.mainClassName|capitalize(curData.subClassName1,curData.subClassName2)}}
              </span>
            </li>
            <li class="flex">
              <span class="column">工&nbsp;&nbsp;作&nbsp;&nbsp;日:</span> <span>{{curData.worktoday|capitalize1}}</span>
            </li>
            <li class="flex-row">
              <span class="column">营业时间:</span>
              <div>{{curData.firstTime|businessHours(curData.secondTime,curData.thirdTime)}}</div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="店铺图片" name="2">
          <ul class="main">
            <li class="flex">
              <span class="column">商家LOGO:</span>
              <div class="show img-wrap">
                <pt-upload class="img" :disabled="true" :upLoadImg="curData.imgpath" />
              </div>
            </li>
            <li class="flex">
              <span class="column">门脸照片:</span>
              <div class="show img-wrap">
                <pt-upload class="img" :disabled="true" :upLoadImg="curData.faceImage" />
              </div>
            </li>
            <li class="flex">
              <span class="column">店内照片:</span>
              <div class="show img-wrap">
                <pt-upload class="img mar-r" v-for="item in (curData.innerImage? curData.innerImage.split(','): [])" :key="item" :disabled="true" :upLoadImg="item" />
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="门店位置" name="3">
          <ul class="main">
            <li class="flex-row" v-if="curData.flag === 2">
              <span class="column">所有子区域:</span>
              <div class="show">{{curData.agentname}}</div>
            </li>
            <li class="flex"><span class="column">门店地址:</span>
              <div class="show map-wrap flex">
                <span>{{curData.provinceName}}{{curData.cityname}}{{curData.countyname}}{{curData.address}}</span>
                <div id="container" class="map-location"></div>
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="资质信息" name="4">
          <div class="wrap-item">
            <div class="item">
              <div class="title">主体资质</div>
              <ul class="main" v-if="curData.maincert === 1">
                <li class="flex">
                  <span class="column">资质照片:</span>
                  <div class="show img-wrap">
                    <pt-upload class="img" :disabled="true" :upLoadImg="curData.mainimg" />
                  </div>
                </li>
                <li class="flex"><span class="column">单位名称:</span><span class="show">{{curData.mainorgname}}</span></li>
                <li class="flex"><span class="column">法人代表:</span><span class="show">{{curData.mainleader}}</span></li>
                <li class="flex"><span class="column">注册号:</span><span class="show">{{curData.registernum}}</span></li>
                <li class="flex"><span class="column">注册地址:</span><span class="show">{{curData.registeraddress}}</span></li>
                <li class="flex"><span class="column">有效期:</span><span class="show">{{curData.mainexpirationdate || '长期'}}</span></li>
              </ul>
              <div class="tell" v-else>商家未提交</div>
            </div>
            <div class="item">
              <div class="title">行业资质</div>
              <ul class="main" v-if="curData.tradecert === 1">
                <li class="flex">
                  <span class="column">商家LOGO:</span>
                  <div class="show img-wrap">
                    <pt-upload class="img" :disabled="true" :upLoadImg="curData.imgpath" />
                  </div>
                </li>
                <li class="flex"><span class="column">单位名称:</span><span class="show">{{curData.tradeorgname}}</span></li>
                <li class="flex"><span class="column">法人代表:</span><span class="show">{{curData.tradeleader}}</span></li>
                <li class="flex"><span class="column">许可证编号:</span><span class="show">{{curData.licensenum}}</span></li>
                <li class="flex"><span class="column">许可证地址:</span><span class="show">{{curData.licenseaddress}}</span></li>
                <li class="flex"><span class="column">食品安全等级:</span><span class="show">{{curData.checkresult}}</span></li>
                <li class="flex"><span class="column">经营范围:</span><span class="show">{{curData.businessscope}}</span></li>
                <li class="flex"><span class="column">有效期:</span><span class="show">{{curData.tradeexpirationdate || '长期'}}</span></li>
              </ul>
              <div class="tell" v-else>商家未提交</div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="门店设置" name="5">
          <div class="wrap-item">
            <div class="item">
              <div class="title">银行卡</div>
              <ul class="main" v-if="curData.bindingBank">
                <li class="flex"><span class="column">真实姓名:</span><span class="show">{{curData.establishname}}</span></li>
                <li class="flex"><span class="column">银行卡号:</span><span class="show">{{curData.account}}</span></li>
                <li class="flex"><span class="column">提现银行:</span><span class="show">{{curData.bank ? bankList[curData.bank - 1].label : curData.bankname}}</span></li>
                <li class="flex"><span class="column">支行信息:</span><span class="show">{{curData.branchname}}</span></li>
              </ul>
              <div class="tell mini" v-else>商家未绑定银行</div>
            </div>
            <div class="item">
              <div class="title">支付宝</div>
              <ul class="main" v-if="curData.bindingZfb">
                <li class="flex"><span class="column">单位名称:</span><span class="show">{{curData.tradeorgname}}</span></li>
                <li class="flex"><span class="column">法人代表:</span><span class="show">{{curData.tradeleader}}</span></li>
              </ul>
              <div class="tell mini" v-else>商家未绑定支付宝</div>
            </div>
          </div>
          <ul class="main">
            <li class="flex"><span class="column">配送方式:</span><span class="show">{{curData.isDeliver === 1 ? '自配送' : '平台配送'}}</span></li>
            <li class="flex" v-if="curData.isDeliver === 1"><span class="column">自配送费:</span><span class="show">{{curData.busshowps}}{{comConfig.unit}}</span></li>
            <!-- <li class="flex" v-if="curData.isDeliver === 1"><span class="column">自配送最大距离:</span><span class="show">{{filtersKmToOtherUnit(curData.maxdistance)}}{{comConfig.length}}</span></li> -->
            <li class="flex"><span class="column">打包时间:</span><span class="show">{{curData.packtime}}分</span></li>
            <li class="flex"><span class="column">起送价:</span><span class="show">{{curData.startpay}}{{comConfig.unit}}</span></li>
            <li class="flex"><span class="column">是否支持自取:</span><span class="show">{{curData.suportself ? '支持' : '不支持'}}</span></li>
            <li class="flex"><span class="column">是否支持预定:</span><span class="show">{{curData.bookable ? '支持' : '不支持'}}</span></li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="待审核处理" name="6">
         <el-button type="primary" @click="openPass">去审核通过</el-button>
         <el-button type="primary" @click="closePass">去处理驳回</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>
<script>
  import { kmToOtherUnit } from '@/utils/unitChange.js'
  import AMap from 'AMap'
  export default {
    props: {
      curData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        map: null,
        activeName: '1',
        polygon1: null,
        shopMarker: null,
        bankList: [ // 支持银行列表
          { label: '中国工商银行', value: 1 },
          { label: '中国建设银行', value: 2 },
          { label: '招商银行', value: 3 },
          { label: '中国农业银行', value: 4 },
          { label: '交通银行', value: 5 },
          { label: '中国银行', value: 6 },
          { label: '广发银行', value: 7 },
          { label: '华夏银行', value: 8 },
          { label: '兴业银行', value: 9 },
          { label: '光大银行', value: 10 },
          { label: '浦东发展银行', value: 11 },
          { label: '邮政银行', value: 12 },
          { label: '北部湾银行', value: 13 },
          { label: '桂林银行', value: 14 },
          { label: '农村合作信用社', value: 15 },
          { label: '柳州银行', value: 16 },
          { label: '徽商银行', value: 17 },
          { label: '民生银行', value: 18 }
        ]
      }
    },
    watch: {
      curData: {
        handler(newVal, oldVal) {
          if (newVal.latitude && newVal.longitude && this.map) {
            this.showMarker(parseFloat(newVal.longitude), parseFloat(newVal.latitude))
          }
        },
        deep: true
      }
    },
    filters: {
      imgList(img) { // 店内多装图片合并数据
        if (img) {
          return img.split(',').map((item, index) =>{
            return { name: `已保存的图片${index + 1}.jpg`, url: `http://image.jiaowawang.cn/${item}`}
          })
        } else {
          return []
        }
      },
      businessHours(t1,t2,t3) { // 营业时间
        let str = '全天'
        if (t1) {
          const arr1 = t1.split(',')
          str = `${arr1[0].slice(0,5)}-${arr1[1] =='23:59:59'||arr1[1] =='23:59'?'24:00':arr1[1].slice(0,5)}`
          if (t2) {
            const arr2 = t2.split(',')
            str += `、${arr2[0].slice(0,5)}-${arr2[1] =='23:59:59'||arr2[1] =='23:59'?'24:00':arr2[1].slice(0,5)}`
            if (t3) {
              const arr3 = t3.split(',')
              str += `、${arr3[0].slice(0,5)}-${arr3[1] =='23:59:59'||arr3[1] =='23:59'?'24:00':arr3[1].slice(0,5)}`
            }
          }
        }
        return str
      },
      capitalize(t1, t2, t3) {
        let arr = [t1, t2, t3]
        arr.forEach((item, index) => {
          if (!item) arr.splice(index, 1)
        })
        return arr.length > 0 ? arr.join('、') : ''
      },
      capitalize1(val) {
        const arr = ['周一', '周二', '周三', '周四' , '周五', '周六', '周日']
        if (val) {
          return val.split(',').map(item => arr[item - 1]).join('、')
        } else return ''
      }
    },
    methods: {
      filtersKmToOtherUnit(num) { // 单位换算
        return kmToOtherUnit(num)
      },
      openPass() { // 处理审核同
        this.$emit('openPass', this.curData)
      },
      closePass() { // 处理驳回
        this.$emit('closePass', this.curData)
      },
      searvicePos(pos) { // 
        let position = pos.trim()
        const lastStr = position.charAt(position.length - 1)
        if (lastStr === '|') {
          position = position.substring(0, position.lastIndexOf('|'))
        }
        const positionArr = []
        position.split('|').forEach(item => {
          const pos = item.split(',')
          if (this.isChina) positionArr.push(pos)
          else positionArr.push({lng: parseFloat(pos[0]), lat: parseFloat(pos[1])})
        })
        return positionArr
      },
      showRectangleMax(pos) { // 显示代理商区域
        if (this.map) {
          if (this.isChina) {
            if (this.polygon1) this.map.remove(this.polygon1)
            this.polygon1 = new AMap.Polygon({
              map: this.map,
              path: this.searvicePos(pos),
              strokeColor: '#ff232f',
              strokeOpacity: 1,
              strokeWeight: 2,
              fillColor: '#6bf517',
              fillOpacity: 0.35
            })
            this.map.setFitView()
          } else {
            if (this.polygon1) this.polygon1.setMap(null)
            this.polygon1 = new google.maps.Polygon({
              paths: this.searvicePos(pos),
              strokeColor: "#ff232f",
              strokeOpacity: 1,
              strokeWeight: 2,
              fillColor: "#6bf517",
              fillOpacity: 0.35
            })
            this.polygon1.setMap(this.map)
            this.polygon1.addListener('click', this.showInfoClick)
            this.mapsetFitView()
          }
        }
      },
      mapsetFitView() {
        this.$nextTick(() => {
          if (this.isChina) {
            this.map.setFitView()
          } else {
            const bounds = new google.maps.LatLngBounds()
            this.searvicePos(this.curData.distrange).forEach(item => {
              bounds.extend(item)
            })
            this.map.fitBounds(bounds)
          }
        })
      },
      handleClick(tab, event) { // 设置围栏居中
        if (this.activeName === '3' && this.curData.flag === 2) {
          this.mapsetFitView()
        }
      },
      init() {  // 初始化地图
        this.map = new AMap.Map('container', {
          center: [116.481181, 39.989792], resizeEnable: true, zoom: 17
        })
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          this.map.addControl(new AMap.ToolBar())
          this.map.addControl(new AMap.Scale())
        })
        if (this.curData.latitude && this.curData.longitude) {
          this.showMarker(this.curData.longitude, this.curData.latitude)
        }
      },
      showMarker(lng, lat) { // 显示标记
        if (this.isChina) {
          if (this.shopMarker) this.map.remove(this.shopMarker)
          this.map.setCenter([lng, lat])
          this.shopMarker = new AMap.Marker({
            icon: 'assets/img/poi-marker-red.png',
            position: new AMap.LngLat(lng, lat),
            offset: new AMap.Pixel(-23, -63)
          })
          this.map.add(this.shopMarker)
          if (this.curData.distrange && this.curData.flag === 2) {
            this.showRectangleMax(this.curData.distrange)
          }
          else {
            if (this.polygon1) this.map.remove(this.polygon1)
          }
        } else {
          if (this.shopMarker) this.shopMarker.setMap(null)
          this.map.setCenter({ lng, lat })
          this.shopMarker =  new google.maps.Marker({
            position: { lng, lat },
            icon: {
              url: "assets/img/poi-marker-red.png",
              size: new google.maps.Size(51, 70),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(23, 63)
            }
          })
          this.shopMarker.setMap(this.map)
          if (this.curData.distrange && this.curData.flag === 2) {
            this.showRectangleMax(this.curData.distrange)
          }
          else {
            if (this.polygon1) this.polygon1.setMap(null)
            }
          }
        },
        googleInit() {
          this.map = new google.maps.Map(document.getElementById('container'), {
            center: { lat: -34.397, lng: 150.644 },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 17
          })
          if (this.curData.latitude && this.curData.longitude) {
            this.showMarker(parseFloat(this.curData.longitude), parseFloat(this.curData.latitude))
          }
        }
      },
    mounted() {
      if (this.isChina) {
        this.init()
      } else {
        this.googleInit()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .wrap-item{
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .item{
      width: calc(50% - 5px);
      &:nth-child(odd){
        margin-right: 5px;
      }
      &:nth-child(even){
        margin-left: 5px;
      }
      .title{
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
        background: #f5f5f5;
      }
      .tell{
        text-align: center;
        padding: 40px 0;
        color: #999;
        &.mini{
          padding: 10px 0;
        }
      }
    }
  }
  .main {
    padding: 10px 15px;
    margin: 0 auto;
    li {
      margin-bottom: 10px;
      .column {
        min-width: 100px;
        font-weight: 600;
        margin-right: 10px;
      }
      .show {
        flex: 1;
      }
      .img-wrap{
        display: flex;
        flex-flow: row wrap;
        .img{
          width: 120px;
          height: 120px;
          &.mar-r{
            &+.mar-r{
              margin-left: 10px;
            }
          }
        }
      }
      .map-wrap {
        flex-flow: column wrap;
        span {
          margin-bottom: 10px;
        }
        #container {
          width: 100%;
          height: 280px;
        }
      }
    }
  }
</style>
